<template>
    <div class="Datatotal_page">
        <div class="page_box">
            <div class="tabs">
                <p v-for="(item,index) in tabs" @click="taptabs(index)" :key="index" :class="activenum==index?'activeitem':''">
                    {{item}}
                </p>
            </div>
            <div class="page_content">
                <div class="con_box">
                     <datastatistics v-if="activenum==1" />
                     <scorday v-if="activenum==3" />
                     <keyindicators v-if="activenum==0" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import scorday from './scorday'
import datastatistics from './datastatistics'
import keyindicators from './keyindicators'
export default{
    components:{
        scorday,datastatistics,keyindicators
    },
    data(){
        return{
            activenum:1,
            tabs:["关键参数指标统计","下游用户输气统计","贵州官网分输月表","湄潭站分数日表"],
        }
    },
    methods:{
        taptabs(index){
            this.activenum=index
        }
    }
}
</script>
<style scoped lang="scss">
.Datatotal_page{
    width: calc(100% - 40px);
//   padding-top: 51px;
  height: calc(100% - 51px);
  margin-left: 20px;
}
.page_box{
    height: 100%;
    background: url("~@/assets/images/content_bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .tabs{
        display: flex;
        align-items: center;
        margin-left: 30px;
        padding-top: 24px;
        margin-bottom: 16px;
            p{
                cursor: pointer;
                 background: url("~@/assets/images/bg_normal.png");
                  background-size: 100% 100%;
                    background-repeat: no-repeat;
                    text-align: center;
                    height: 43px;
                    line-height: 43px;
                    padding:0 17px;
                    color: white;
                    margin-right: 13px;
            }
            .activeitem{
                background: url("~@/assets/images/bg_active.png");
                 background-size: 100% 100%;
                    background-repeat: no-repeat;
                    text-align: center;
                    height: 43px;
                    line-height: 43px;
                    padding:0 17px;
                    color: white;
                    margin-right: 13px;
            }
    }
    .page_content{
        padding: 0 30px;
        height: calc(100% - 50px);
        .con_box{
            height: 100%;
        }
    }
}
</style>